<template>
  <div class="person">
    <h2>我是Person组件</h2>
    <h3>接到Count组件传过来的参数:{{sum}}</h3>
    <h4>接到School组件传过来的参数:{{bigSum}}</h4>
    <input  v-model="username" type="text">
    <button @click="addPerson">添加</button>
    <ul>
      <li v-for=" p in persons" :key="p.id">
        {{p.id}}-----{{ p.name }}
      </li>
    </ul>
  </div>

</template>

<script>
import {mapGetters, mapState} from "vuex";

export default {
  name: "Person",
  data() {
    return {
      username:''
    }
  },
  computed:{
    ...mapState(['sum','school','persons']),
    ...mapGetters(['bigSum'])
  },
  methods:{
    addPerson(){
    const p={id:Date.now(),name:this.username}
    this.$store.commit('ADDP',p)
      // console.log(this)
      this.username=''//清空输入框
    }
  }
}
</script>

<style scoped>
.person{
  background: #bfa;
  padding: 10px;
}
</style>